{include file="public/header"}
<style scoped>
    	/* 内容区域 */
		.card-container {
			display: flex;
		}
		.card-box {
			min-width: 200px;
			padding:30px 12px 0 12px;
			border-radius: 4px;
			margin: 0px 12px ;
            height: 80px;            
			border: 1px solid #D5DAE3;
			display: block;
    		unicode-bidi: isolate;
			font-size: 14px;
			font-weight: 400;
			color: #76879d;
		}
 
		.card-box:hover {
			border:1px solid #409EFF;
		}

		.card-font {
			font-size: 18px;
			font-weight: 500;
			color: #76879d;
			/* margin-top: 12px; */
		}

		.card-box-item {
			margin: 0 28px;
		}
        .card-span{
            color: #409EFF;
        }
    </style>
{include file="public/style"}       
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>采购管理</el-breadcrumb-item>
            <el-breadcrumb-item>采购列表</el-breadcrumb-item>
        </el-breadcrumb>
        <br>
            <el-card shadow="always" >
                <div style="display: flex;align-items: center;justify-content: flex-start; border: 1px solid #D5DAE3;padding: 12px;border-radius: 4px;margin-bottom: 25px;">
                    <el-form :model="searchForm" ref="searchForm" size="small" label-width="auto" >
                        <el-row :gutter="20"  >
                            <el-col :span="5">
                                <el-form-item label="采购状态" >
                                    <el-select v-model="searchForm.status" clearable filterable placeholder="请选择采购状态">
                                        <el-option v-for="(status_name,status_id) in purchase_status" :key="status_id" :label="status_name" :value="status_id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                   
                            <el-col :span="5">
                                <el-form-item label="仓库" prop="storage_id">
                                <el-select v-model="searchForm.storage_id" clearable filterable placeholder="请选择仓库">
                                    <el-option v-for="item in storagelist" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                    <el-form-item label="本地SKU">
                                    <el-input v-model="searchForm.localsku" placeholder="请输入本地SKU" >
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="采购员" prop="buyers_id" >
                                    <el-select v-model="searchForm.buyers_id" multiple allow-create clearable default-first-option filterable placeholder="请选择采购员" >
                                        <el-option v-for="item in buyers" :key="item.id" :label="item.nickname" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="业务员">
                                    <el-select v-model="searchForm.user_id" clearable filterable placeholder="请选择业务员">
                                        <el-option v-for="item in users_list" :key="item.id" :label="item.nickname" :value="item.id"></el-option>									
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="付款状态" >
                                    <el-select v-model="searchForm.paid_status" clearable filterable placeholder="请选择付款状态">
                                        <el-option v-for="(item,index) in paid_status" :key="index" :label="item" :value="index"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                                             
                        </el-row>      
                    
                        <el-row :gutter="20" >
                            <el-col :span="6">
                                <el-form-item label="时间条件查询">
                                    <el-select v-model="searchForm.timeSearch" multiple allow-create clearable filterable placeholder="请选择时间条件" >
                                        <el-option v-for="item in timeConditions" :key="item.value" :label="item.label" :value="item.value" @change="handleTimeConditionChange" ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            
                            <template v-for="timeType in timeTypes">                        
                                <el-col :span="6" v-if="searchForm.timeSearch.includes(timeType.value)" :key="timeType.value">
                                    <el-form-item :label="timeType.label">
                                        <el-date-picker
                                            v-model="searchForm?.dateRanges[timeType.value]"
                                            type="daterange"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            value-format="yyyy-MM-dd"
                                            style="width: 216px"
                                            :picker-options="pickerOptions"
                                            >
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </template>
                        </el-row>

                        <el-row :gutter="20" >
                            <el-col :span="6">
                                <el-form-item label="采购单号" >
                                    <el-input type="textarea"  placeholder="20500101001 20500101002" v-model="searchForm.purchase_no"  ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="1688单号">
                                    <el-input type="textarea"  placeholder="20500101001 20500101002" v-model="searchForm.ordernum"  ></el-input>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="4">
                                <el-form-item label="运单号">
                                    <el-input type="textarea"  placeholder="20500101001,20500101002" v-model="searchForm.stock_up_no"  ></el-input>
                                </el-form-item>
                            </el-col> -->
                        
                            <el-col :span="12">
                                <el-form-item label=" " label-width="10px">
                                    <el-button type="primary"  @click="getSearch" icon="el-icon-search">查询</el-button>								
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>  
                
                <el-card class="box-card" shadow="always" style="margin-top: 8px;">
                    <template>
                    <div class="card-container">              
                        <div class="card-box" style="display: flex;">
                            <div class="card-box-item">
                                <div>采购总单数</div>
                                <div >
                                    <span class="card-span">总计</span>
                                    <span class="card-font" >{{count_quantity.singular_count}}</span>                                  
                                </div>
                            </div>
                            <div class="card-box-item">
                                <div>采购总件数</div>
                                <div >
                                     <span class="card-span">总计</span>
                                    <span class="card-font" >{{count_quantity.valid_count}}</span>
                                   
                                </div>
                            </div>
                        </div>

                        <div class="card-box" style="display: flex;">
                            <div class="card-box-item">
                                <div>未付款总计</div>
                                <div>
                                    <span class="card-span">总计</span>
                                    <span class="card-font" >{{count_quantity.unpaid_total}}</span>                                    
                                </div>
                            </div>

                            <div class="card-box-item">
                                <div>付款合计</div>
                                <div>
                                    <span class="card-span">总计</span>
                                    <span class="card-font" >{{count_quantity.paid_total}}</span>
                                 
                                </div>
                            </div>                            
                        </div>
                        <div class="card-box"  style="display: flex;">
                            <div class="card-box-item" v-for="(item,index) in purchase_status" :key="index" >
                                <div>{{item}}单数</div>
                                <div>
                                     <span class="card-span">总计</span>                                    
                                    <span class="card-font">{{count_quantity.count[index]}}</span>                                  
                                </div>
                            </div> 
                        </div>                        
                        <div class="card-box" >
                            <div>运费合计</div>
                            <div style="margin-top: 4px;">
                                 <span class="card-span">总计</span>
                                <span class="card-font" >{{count_quantity.total_freight}}</span>                               
                            </div>
                        </div>
                    </div>
                    </template>
                </el-card>

                <el-card class="box-card" shadow="always" style="margin-top: 18px;">
                    <el-table :data="tablelist"  tooltip-effect="light"  style="width: 100%;margin-bottom: 20px;"  :row-style="rowStyle"   row-key="id"  border >                        
                        <el-table-column   prop="purchase_no" label="采购单号" min-width="100"> </el-table-column>  
                        <el-table-column   prop="company_name" label="供应商" min-width="100"> </el-table-column>  
                        <el-table-column   prop="status_name" label="采购单状态" min-width="80"></el-table-column>  
                        <el-table-column   prop="stroage_name" label="到货仓库" min-width="80"></el-table-column>  
                        <el-table-column   prop="quantity" label="采购数量" min-width="80"></el-table-column>   
                        <el-table-column   prop="amount" label="采购总价" min-width="80" ></el-table-column>  
                        <el-table-column   prop="order_num" label="采购1688单号"min-width="100"></el-table-column>  
                        <el-table-column   prop="paid_status_name" label="付款状态"min-width="80" ></el-table-column>  
                        <el-table-column   prop="paid_time" label="付款时间"min-width="100" ></el-table-column>  
                        <el-table-column   prop="notes" label="备注" min-width="100"> </el-table-column> 
                        <el-table-column   prop="createtime" label="下单时间"min-width="100" ></el-table-column> 
                        <el-table-column  fixed="right" label="操作" width="250">
                            <template v-slot="{row}">
                                <el-button type="primary"  plain  icon="el-icon-view"  @click="dateil(row)" >查看 </el-button>                
                                 <el-button  type="danger"    icon="el-icon-delete"  @click="cancel(row)"  v-if="row.status === 1">取消 </el-button>                                  
                            </template>
                        </el-table-column>
                    </el-table>
                     <!-- page -->
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pagenum" :page-sizes="[20,50,100, 150, 300,500,1000,2000]"
                    :page-size="searchForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination> 
                </el-card>     
                <!-- page -->
                
            </el-card>
          
    </div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {                      
                    title:'',       
                    pay_method:[],//支付方式    
                    purchase_status:{$status|raw},//采购状态
                    users_list:[],//业务员
                    storagelist:{$storagelist|raw},//仓库列表
                    buyers:[],//采购员
                    paid_status:{$paid_status |raw},//付款状态
                    //时间类型
                	timeConditions:[
                            {value:'createtime',label:'下单时间'},
                            {value:'paid_time',label:'付款时间'},    
                            {value:'finish_time',label:'完结时间'},                       
                    ],
                    timeTypes: [                        
                        { value: 'paid_time', label: '付款时间' },                    
                        { value: 'createtime', label: '下单时间' },
                        { value: 'finish_time', label: '完结时间' },
                    ],
                    total:0,   //分页总页数      
                    tablelist:[] ,   
                    searchForm:{
                        timeSearch:[],
                        dateRanges:{
                            finish_time:[],
                            createtimetime:[],                         
                            paid_time:[],
                        },
                        pagenum: 1,
                        pagesize: 20, 
                        purchase_no:'',
                        ordernum:'',
                        user_id:'',   
                        buyers_id:'',
                        status:'',
                        storage_id:'',
                        localsku:'',
                        paid_status:'',
                    } ,  
                    count_quantity:{
                        count: {}
                    },                  
                    pickerOptions: {
                        shortcuts: [{
                            text: '最近一周',
                            onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近一个月',
                            onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近三个月',
                            onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                            }
                        }]        
                    }
                    
                   
                }
            },
            async mounted(){                  
                this.getSearch()
                await this.getusers_list()
                await this.getbuyers_list()
            },
            methods: {             
                  // 动态设置行样式
                rowStyle({ row, rowIndex }) {
                    let style = {};       
                        if(row.status === 1){
                            style = { backgroundColor: '#fdf5e6', color: '#333' }; // 绿色f0f9eb
                        }else if (row.status === 3) {
                             style = { backgroundColor: '#f0f9eb', color: '#333' }; // 绿色f0f9eb
                        }   
                
                    return style;           
                },
                async getDatalist() {
                    const res = await axios.post('/admin/Purchase/index', {params: this.searchForm})
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }
                    this.total = res.info.total
                    this.tablelist = res.info.list
                    this.count_quantity = res.info.count_quantity
                },
                    
                handleSizeChange(newSize) {
                    this.searchForm.pagesize = newSize
                    this.getDatalist()
                },
                handleCurrentChange(newPage) {
                    this.searchForm.pagenum = newPage
                    this.getDatalist()
                },              
                getSearch() {
                    this.searchForm.pagenum = 1
                    this.getDatalist()
                },       
   
             
                //获取业务的列表    
                async getusers_list(){ 
                    axios.post('/admin/User/get_group_user_list', {params: {group_id: 1}}).then(res => {                  
                        if (res.status !== 1) {

                             
                            return this.$message.error(res.info);                  
                        }    
                        this.users_list=res.info.list
                    });
                },
                 //获取采购员    
                async getbuyers_list(){ 
                    axios.post('/admin/User/get_group_user_list', {params: {group_id: 2}}).then(res => {                  
                        if (res.status !== 1) {
                            return this.$message.error(res.info);                  
                        }    
                        this.buyers=res.info.list
                    });
                },
                handleTimeConditionChange(val){
				    // 自动清空已取消选择的时间范围

                    Object.keys(this.searchForm.dateRanges).forEach(key => {
                          console.log(key);
                      
                    });
                },
                async cancel(row){
                    this.$confirm('确认需要删除采购单？删除了无法恢复', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        closeOnClickModal: false, // 禁用点击遮罩关闭弹窗
                        type: 'warning'
                    }).then(() => {
                        axios.post('/admin/Purchase/cancel_purchase', {params: {id: row.id}}).then(res => {
                            if (res.status !== 1) {
                                return this.$message.error(res.info);             
                            }                    
                            this.$message.success('删除成功');
                            this.getDatalist()



                        }).catch(err => {
                            console.log(err)
                        })
                    }).catch(() => {
                        this.$message.info('已取消');
                    });
                },
                 //查看详情
                dateil(row){
                    window.location.href = "/admin/purchase/purchase_detail?id="+row.id
                }
            }
        })
    </script>
 </body> 
</html>
